<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据集</title>
    <style>
        #main {
            width: 700px;
            height: 500px;
        }
    </style>
</head>
<body>

<div id="main"></div>

<script src="http://lib.baomitu.com/echarts/4.7.0/echarts.min.js">

</script>

<script>
    const myChart = echarts.init(document.getElementById('main'))

    myChart.setOption({
        title: {
            text: 'CPU系统监控'
        },
        tooltip: {},
        legend: {
            data: ['cpu1', 'cpu2', 'cpu3', 'cpu4']
        },
        xAxis: {
            data: [],
        },
        yAxis: {},
        series: [{
            name: 'cpu1',
            type: 'line',
            data: []
        }, {
            name: 'cpu2',
            type: 'line',
            data: []
        }, {
            name: 'cpu3',
            type: 'line',
            data: []
        }, {
            name: 'cpu4',
            type: 'line',
            data: []
        }]
    });

    var insert_time = ["", "", "", "", "", "", "", "", "", ""]
    var cpu1 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    var cpu2 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    var cpu3 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    var cpu4 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

    var lastID = 0; // 哨兵，记录上次数据表中的最后id +1（下次查询只要>=lastID）

    //准备好统一的 callback 函数
    var update_mychart = function (data) {

        // myChart.hideLoading(); // 隐藏加载动画

        dataLength = data.insert_time.length; //取回的数据长度
        lastID += dataLength; //哨兵，相应增加。

        // 切片是能统一的关键！！
        insert_time = insert_time.slice(dataLength).concat(data.insert_time); // 数组，先切片、再拼接
        cpu1 = cpu1.slice(dataLength).concat(data.cpu1.map(parseFloat));
        cpu2 = cpu2.slice(dataLength).concat(data.cpu2.map(parseFloat));
        cpu3 = cpu3.slice(dataLength).concat(data.cpu3.map(parseFloat));
        cpu4 = cpu4.slice(dataLength).concat(data.cpu4.map(parseFloat));

        myChart.setOption({
            xAxis: {
                data: insert_time
            },
            series: [{
                name: 'cpu1',
                data: cpu1
            }, {
                name: 'cpu2',
                data: cpu2
            }, {
                name: 'cpu3',
                data: cpu3
            }, {
                name: 'cpu4',
                data: cpu4
            }]
        });

        if (dataLength === 0) {
            clearInterval(timeTicket);
        }
    }

    // myChart.showLoading(); // 首次显示加载动画

    // 异步加载数据 （首次，get，显示6个数据）
    // $.get('/cpu').done(update_mychart);

    // 异步更新数据 （以后，定时post，取回1个数据）
    const timeTicket = setInterval(function () {
        // $.post('/cpu', {id: lastID}).done(update_mychart);

        update_mychart({
            insert_time: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
            cpu1: [
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
            ],
            cpu2: [
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
            ],
            cpu3: [
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
            ],
            cpu4: [
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
                Math.round(Math.random() * 100),
            ],
        })
    }, 1000);


</script>
</body>
</html>
